<template>
  <div class="container" ref="movielist">

    <div>

      <h2>最受好评的电影</h2>
      <div class="expectwrapper" ref="expect">
        <ul class="expectitems" :style="{width:getWidth}">
          <MostExpectItem v-for="item in expect.expectlist" :movie="item" :key="item.id"></MostExpectItem>
        </ul>
      </div>

      <div class="movielist">
        <MovieItem v-for="item in movie.movieList" :item="item" :key="item.id"></MovieItem>
      </div>
    </div>

  </div>
</template>


<script>
import BScroll from "@better-scroll/core"
import Pullup from "@better-scroll/pull-up"
import MostExpectItem from "./MostExpectItem"
import MovieItem from "./MovieItem"
import { get } from "@/api/http"
import { Toast } from "vant"
BScroll.use(Pullup)

export default {
  data() {
    return {
      //最受好评的电影
      expect: {
        expectlist: [],
        //数据请求的起始值
        start: 0,
        //每页的数据条数
        limit: 5,
        //是否有更多的数据
        hasMore: true
      },
      movie: {
        coming: [],
        movieIds: [],
        movieList: [],
        //数据请求的起始值
        start: 12,
        limit: 10,
        //是否有更多的数据
        hasMore: true
      }
    }
  },
  computed: {
    getWidth() {
      return 26.667 * this.expect.expectlist.length + "vw"
    }
  },
  components: {
    MostExpectItem,
    MovieItem
  },

  created() {
    this.getExpectList()
    this.getMovielist()
  },
  methods: {
    async getExpectList() {
      let rs = await get("/api/expectlist", {
        _start: this.expect.start,
        _end: this.expect.start + this.expect.limit
      })
      //判断返回的数据条数，是否满足我们要求的数据条数
      if (rs.data.length < this.expect.limit) {
        this.expect.hasMore = false
      }
      this.expect.expectlist.push(...rs.data)
      this.expect.start += this.expect.limit

      //确保dom生成完毕
      this.$nextTick(() => {
        this.initScroll()
      })
    },
    async getMovielist() {
      let rs = await get("/ajax/movieOnInfoList")
      this.movie.movieIds = rs.data.movieIds
      this.movie.movieList.push(...rs.data.movieList)

      if (rs.data.movieList.length < 12) {
        this.movie.hasMore = false
      }

      this.$nextTick(() => {
        this.initMovielistScroll()
      })
    },
    async getMoreMovielist() {
      let start = this.movie.start
      let end = start + this.movie.limit
      let rs = await get("/ajax/moreComingList", {
        movieIds: this.movie.movieIds.slice(start, end).join(","),
        token: "",
        optimus_code: 10
      })
      this.movie.movieList.push(...rs.data.coming)

      if (rs.data.coming.length < this.movie.limit) {
        this.movie.hasMore = false
      }

      this.$nextTick(() => {
        this.movie.start += this.movie.limit
        this.bscroll.finishPullUp()
        this.bscroll.refresh()
      })
      console.log(rs)
    },
    initMovielistScroll() {
      this.bscroll = new BScroll(this.$refs.movielist, {
        pullUpLoad: true,
        click: true
      })
      this.bscroll.on("pullingUp", () => {
        console.log("up....")
        if (this.movie.hasMore) {
          this.getMoreMovielist()
        } else {
          Toast("没有更多的数据了")
        }
      })
      this.bscroll.on("scroll", position => {
        if(position.y< -50) {
          this.$store.commit('setShowAd', false)
        }else{
           this.$store.commit('setShowAd', true)
        }
      })
    },
    initScroll() {
      if (this.bs) {
        this.bs.refresh()
        return
      }
      //确保dom生成完毕
      this.bs = new BScroll(this.$refs.expect, {
        scrollX: true,
        click: true,
        probeType: 3 // listening scroll hook
      })
      //拖到到最右侧
      this.bs.on("scrollEnd", () => {
        if (this.expect.hasMore) {
          this.getExpectList()
        } else {
          Toast("没有更多的数据了")
        }
      })
    }
  }
}
</script>



<style lang="scss" scoped>
@import "@/assets/style/mixin.scss";
.container {
  height: 100%;
  overflow: hidden;
  @include border1px(#666666);
  flex: 1;
  display: flex;
  flex-direction: column;
  h2 {
    font-size: 14px;
    color: #333;
    padding: 12px 12px 6px 10px;
    line-height: 20px;
    font-weight: 200;
  }
  .expectwrapper {
    overflow: hidden;
  }
  .expectitems {
    display: flex;
  }
  .movielist {
    flex: 1;
    flex-direction: column;
  }
}
</style>

